<template>
  <view class="mt-tabbar">
    <view class="mt-tabbar_placeholder"></view>
    <view class="mt-tabbar_fixed" :style="{ 'z-index': zIndex }">
      <view
        v-for="(item, index) in tabbarList"
        :key="index"
        class="mt-tabbar-item"
        :class="{ active: current === index }"
        @click="handleChangeTab(index)"
      >
        <view v-if="index !== 2" class="mt-tabbar-item_iconbox">
          <image v-if="current === index" class="mt-tabbar-item_icon" :src="item.activeIcon"></image>
          <image v-else class="mt-tabbar-item_icon" :src="item.icon"></image>
          <view v-if="item.badge > 0" class="mt-tabbar-item_badge">
            <uv-badge type="error" max="99" :value="item.badge"></uv-badge>
          </view>
        </view>
        <view v-if="index === 2" class="mt-tabbar-item_iconbox exceed">
          <image class="mt-tabbar-item_icon" :src="item.icon"></image>
        </view>
        <view class="mt-tabbar-item_text">{{ item.text }}</view>
      </view>
    </view>
  </view>
</template>

<script setup>
const props = defineProps({
  zIndex: {
    type: String,
    default: '11'
  },
  current: {
    type: Number,
    default: 0
  }
});

const tabbarList = ref([
  {
    icon: 'https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-home.svg',
    activeIcon: 'https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-home-check.svg',
    text: '首页',
    badge: 0
  },
  {
    icon: 'https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-product.svg',
    activeIcon: 'https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-product-check.svg',
    text: '产品',
    badge: 0
  },
  {
    icon: 'https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-releaseClues-check.svg',
    activeIcon: 'https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-releaseClues-check.svg',
    text: '发布线索',
    badge: 0
  },
  {
    icon: 'https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-activity.svg',
    activeIcon: 'https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-activity-check.svg',
    text: '活动',
    badge: 0
  },
  {
    icon: 'https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-my.svg',
    activeIcon: 'https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-my-check.svg',
    text: '我的',
    badge: 0
  }
]);

function handleChangeTab(index) {
  if (props.current === index) return;

  if (index === 0) {
    uni.reLaunch({
      url: '/pages/index/index'
    });
  } else if (index === 1) {
    uni.reLaunch({
      url: '/pages/product/index'
    });
  } else if (index === 2) {
    uni.navigateTo({
      url: '/subClue/pages/release'
    });
  } else if (index === 3) {
    uni.reLaunch({
      url: '/pages/activity/index'
    });
  } else if (index === 4) {
    uni.reLaunch({
      url: '/pages/my/index'
    });
  }
}
</script>

<style lang="scss" scoped>
.mt-tabbar {
  position: relative;
  .mt-tabbar_placeholder {
    height: 50px;
  }
  .mt-tabbar_fixed {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    border: 2rpx solid #e6e6e6;
    padding-bottom: env(safe-area-inset-bottom);
    background-color: #ffffff;
    box-sizing: content-box;
  }
  .mt-tabbar-item {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 50px;
    padding-top: 6px;
    box-sizing: border-box;
    &.active {
      .mt-tabbar-item_text {
        color: $mt-color-primary;
      }
    }
    .mt-tabbar-item_iconbox {
      position: relative;
      margin-bottom: 2px;
      &.exceed {
        margin-bottom: 4px;
        .mt-tabbar-item_icon {
          width: 40px;
          height: 40px;
          margin-top: -18px;
        }
      }
      .mt-tabbar-item_icon {
        width: 24px;
        height: 24px;
        vertical-align: top;
      }
    }
    .mt-tabbar-item_text {
      font-size: 11px;
      color: #727687;
      line-height: 11px;
    }
    .mt-tabbar-item_badge {
      position: absolute;
      right: -14px;
      top: -5px;
    }
  }
}
</style>
